<div class="layout-designer">
    <div class="layout-editor-toolbar mb-2">
        <ul class="layout-editor-toolbar-group">
            <li style="line-height:40px;">
                <label>{{title}}</label> &nbsp;&nbsp;&nbsp;&nbsp;<p-inputSwitch [(ngModel)]="isEditing"></p-inputSwitch> 编辑模式
            </li>
        </ul>
        <ul class="layout-editor-toolbar-group" >
            <li>
                <i [tooltip]="popTemplate" placement="left" class="fa fa-info-circle"></i> Clipboard, keyboard shortcuts, etc.
            </li>
        </ul>
    </div>

    <div  id="l{{randomId}}" class="layout-editor-holder"  (keydown)="keydown($event)" tabindex="0" (click)="click(null, $event)"  >
        <div class="layout-editor"  [ngClass]="{'layout-editor-dragging': isDragging}" >
            <div class="layout-canvas-wrapper">
                <div class="layout-toolbar-container"></div>
                <ng-container [ngTemplateOutlet]="CanvasTemplate"></ng-container>
            </div>

            <div class="layout-toolbox-wrapper" >
                <div class="layout-toolbox" id="tool{{randomId}}">
                    <ul class="layout-toolbox-groups">
                        <li class="layout-toolbox-group" [ngClass]="{'collapsed': layoutIsCollapsed}">
                            <a href="javascript:" class="layout-toolbox-group-heading"
                                (click)="toggleLayoutIsCollapsed($event)">
                                <i class="bi bi-caret-right-fill" [hidden]="layoutIsCollapsed"></i>
                                <i class="bi bi-caret-down-fill" [hidden]="!layoutIsCollapsed"></i>&nbsp;Layout</a>
                            <ul class="layout-toolbox-items" >
                                <li draggable="true"  (dragstart)="dragstart(item,$event)"  (dragend)="dragend(item,$event)" 
                                   *ngFor="let item of layoutItems" [ngClass]="item.className" class="layout-toolbox-item" 
                                    title="{{item.title}}">
                                    <i [ngClass]="item.icon">{{item.iconText}}</i> {{item.displayName}}
                                </li>
                            </ul>
                        </li>
                        <li class="layout-toolbox-group" [ngClass]="{'collapsed': contentIsCollapsed}">
                            <a href="javascript:"  class="layout-toolbox-group-heading"
                                (click)="toggleContentIsCollapsed($event)">
                                <i class="bi bi-caret-right-fill" [hidden]="contentIsCollapsed"></i>
                                <i class="bi bi-caret-down-fill" [hidden]="!contentIsCollapsed"></i>&nbsp;Content</a>
                            <ul class="layout-toolbox-items" >
                                <li draggable="true"  (dragstart)="dragstart(item,$event)"  (dragend)="dragend(item,$event)" 
                                   *ngFor="let item of contentItems" [ngClass]="item.className" class="layout-toolbox-item" 
                                    title="{{item.title}}">
                                    <i [ngClass]="item.icon">{{item.iconText}}</i> {{item.displayName}}
                                </li>
                            </ul>
                        </li>
                     </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- <pre style="color: black; text-align: left; font-size: 12px;">
      {{ data }} 
    </pre> -->
</div>

<ng-template #CanvasTemplate>
    <ng-container [ngTemplateOutlet]="ElementTemplate" [ngTemplateOutletContext]="{ element: eleData }"></ng-container>
</ng-template>
<ng-template #ElementTemplate let-element="element">
    <ng-container *ngIf="!element.isDropingItem">
        <div id="{{element.id}}" [ngClass]="element.getClasses()"
        (dragenter)="dragenter(element,$event)" (dragleave)="dragleave(element,$event)" 
        (dragover)="dragover(element,$event)" (drop)="drop(element,$event)" 
          (mouseenter)="mouseEnter(element,$event)" (mouseleave)="mouseLeave(element,$event)" 
          (click)="click(element, $event)" class="clearfix ">
           <div class="layout-element-wrapper" [ngClass]="{'layout-container-empty': element.getShowChildrenPlaceholder()}" >
                <ng-container [ngTemplateOutlet]="PanelTemplate" [ngTemplateOutletContext]="{ element: element }"></ng-container>
                <div class="layout-container-children-placeholder">{{element.getPlaceHolder()}}</div>
    
               <div class="layout-children clearfix" style="margin:0"  [ngStyle]="element.getNgStyles()" *ngIf="element.type !=='Content' && element.children.length > 0"  [ngClass]="element.getChildrenWrapperClasses()" >
                    <ng-container *ngFor="let child of element.children">
                        <ng-container [ngTemplateOutlet]="ElementTemplate" [ngTemplateOutletContext]="{ element: child }"></ng-container>
                    </ng-container>
               </div>
               <div class="layout-content-markup" [innerHTML]="element.html| trustAs :'html'" *ngIf="element.type==='Content'" ></div>
           </div>
       </div>
    </ng-container>
   
    <li class="layout-element" (drop)="drop(element,$event)"  (dragenter)="dragPause(element,$event)" (dragover)="dragPause(element,$event)"  [ngClass]="element.getClasses()" *ngIf="element.isDropingItem"></li>
</ng-template>

<ng-template #PanelTemplate  let-element="element">
    <ul class="layout-panel layout-panel-main">
        <li class="layout-panel-item layout-panel-label ng-binding">{{element.getPanelLabel()}}</li>
        <li class="layout-panel-item layout-panel-action layout-panel-action-add"  *ngIf="element.type !=='Content'" title="Add new child" (click)="add(element)"><i class="fa fa-plus"></i></li>
        <li class="layout-panel-item layout-panel-action layout-panel-action-edit" *ngIf="element.canEdit()" title="Edit content" (click)="edit(element)"><i class="fa fa-edit"></i></li>
        <li class="layout-panel-item layout-panel-action layout-panel-action-properties " title="Edit styles" 
            (click)="editProperties(element);$event.stopPropagation()"><i class="fa fa-cog"></i></li>
        <li class="layout-panel-item layout-panel-action" title="Delete" (click)="element.delete();$event.stopPropagation()"
            [ngClass]="{disabled: !element.canDelete()}"><i class="bi bi-x"></i></li>
        <li class="layout-panel-item layout-panel-action" title="Moves (reorders) the focused element up/left" (click)="element.moveUp();$event.stopPropagation()"
            [ngClass]="{disabled: !element.canMoveUp()}"><i class="fa fa-chevron-left"></i></li>
        <li class="layout-panel-item layout-panel-action" title="Moves (reorders) the focused element down/right" (click)="element.moveDown();$event.stopPropagation()"
            [ngClass]="{disabled: !element.canMoveDown()}"><i class="fa fa-chevron-right"></i>
        </li>
        <li class="layout-panel-item layout-panel-action" title="Moves focus to the parent element" (click)="element.selectParent();$event.stopPropagation()"
            [ngClass]="{disabled: !element.canSelectParent()}"><i class="bi bi-chevron-up"></i></li>
        <li class="layout-panel-item layout-panel-action" title="Moves focus to the first child element" (click)="element.selectFirstChild();$event.stopPropagation()"
            [ngClass]="{disabled: !element.canSelectFirstChild()}"><i class="bi bi-chevron-down"></i>
        </li> 
        <li class="layout-panel-item layout-panel-action" title="Split column" *ngIf="element.type==='Column'" (click)="element.splitColumn();$event.stopPropagation()"
            [ngClass]="{disabled: !element.cansplitColumn()}"><i class="fa fa-columns"></i></li>
        <li class="layout-panel-item layout-panel-action" title="Decrease column width"  *ngIf="element.type==='Column'"
            (click)="element.decreaseColumnWidth();$event.stopPropagation()" [ngClass]="{disabled: !element.canDecreaseColumnWidth()}">
            <i class="fa fa-indent"></i>
        </li>
        <li class="layout-panel-item layout-panel-action" title="Increase column width"  *ngIf="element.type==='Column'"
            (click)="element.increaseColumnWidth();$event.stopPropagation()" [ngClass]="{disabled: !element.canIncreaseColumnWidth()}">
            <i class="fa fa-outdent"></i>
        </li>
    </ul>
    <div class="layout-column-resize-bar layout-column-resize-bar-left" [hidden]="true">
    </div>
    <div class="layout-column-resize-bar layout-column-resize-bar-right" [hidden]="true">
    </div>
</ng-template>
<ng-template #popTemplate>
<div>
    <table >
        <tr>
            <td><code>Del</code></td>
            <td>删除选中的元素</td>
        </tr>
        <tr>
            <td><code>Ctrl+Z</code></td>
            <td>还原被删的元素</td>
        </tr>
        <tr>
            <td><code>Ctrl+Up/Down</code></td>
            <td>向上/下移动选中的元素</td>
        </tr>
        <tr>
            <td><code>Ctrl+Left/Right</code></td>
            <td>向左/右移动选中的元素 </td>
        </tr>
        <tr>
            <td><code>Up/Left</code></td>
            <td>选中前一个元素 </td>
        </tr>
        <tr>
            <td><code>Down/Right</code></td>
            <td>选中后一个元素 </td>
        </tr>
        
        <tr>
            <td><code>Shift+Up</code></td>
            <td>选取父级元素</td>
        </tr>
        <tr>
            <td><code>Shift+Down</code></td>
            <td>选取第一个下级元素 </td>
        </tr>
        <tr>
            <td><code>Shift+Left</code> </td>
            <td>减小列的宽度</td>
        </tr>
        <tr>
            <td><code>Shift+Right</code></td>
            <td>增加列的宽度</td>
        </tr>
        <tr>
            <td><code>Ctrl+C</code></td>
            <td>复制选中元素 </td>
        </tr>
        <tr>
            <td><code>Ctrl+V</code></td>
            <td>粘贴 </td>
        </tr>
        <tr>
            <td><code>Ctrl+X</code></td>
            <td>剪切选中元素 </td>
        </tr>
</table>
</div>
</ng-template>